<html>

<head>
  <meta charset='utf-8' />
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <title>添加点-Graphic - 4.15</title>
  <link rel='stylesheet' href='/arcgis_js_api/library/4.15/esri/themes/light/main.css' />
  <script src='/arcgis_js_api/library/4.15/init.js'></script>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
    .btn{
      height: 30px;
      width: 80px;
      cursor: pointer;
      line-height: 30px;
      text-align: center;
      color: #fff;
      position: absolute;
      top: 20px;
      right: 20px;
      border-radius: 4px;
      background: #80b7f1;
      z-index: 9999;
    }
    .esri-view-surface::after {
      outline: none !important;
    }
  </style>

</head>

<body>
  <div class="btn" onclick="changeSym()">颜色填充</div>
  <div id='viewDiv'></div>
</body>
<script>
  require([
    'esri/Map',
    'esri/views/MapView',
    "esri/Graphic",
    "esri/layers/GraphicsLayer"
  ], function (Map, MapView, Graphic, GraphicsLayer) {
    var map = new Map({
      basemap: 'topo'
    });
    var view = new MapView({
      container: 'viewDiv',
      map: map,
      center: [118.77044677734375, 32.04998888314202],
      zoom: 12,
    });

    //点、线、面数据
    const point = [
      118.77044677734375,
      32.04998888314202
    ]

    const multipoint = [
      [
        118.79104614257811,
        32.00691143764981
      ], [
        118.81851196289062,
        32.06046411667274
      ], [
        118.67980957031249,
        32.06046411667274
      ]
    ]

    const line = [
      [
        118.7783432006836,
        32.06628317261135
      ],
      [
        118.76031875610352,
        32.055808605387014
      ],
      [
        118.7735366821289,
        32.04445980418589
      ]
    ]

    const multiLine = [
      [
        [
          118.77439498901367,
          32.05930026106166
        ],
        [
          118.78589630126955,
          32.06140973845362
        ],
        [
          118.79508018493651,
          32.059809449713484
        ],
        [
          118.79894256591795,
          32.05449920015355
        ],
        [
          118.78950119018555,
          32.053553506942144
        ],
        [
          118.78795623779297,
          32.056099581783
        ],
        [
          118.7837505340576,
          32.053844490509746
        ]
      ],
      [
        [
          118.77877235412598,
          32.055299394467355
        ],
        [
          118.78151893615723,
          32.04475081666863
        ]
      ]
    ]

    const multiPolygon = [
      [
        [
          118.82675170898438,
          32.05202582803068
        ],
        [
          118.85679244995116,
          32.05202582803068
        ],
        [
          118.85679244995116,
          32.067155999071446
        ],
        [
          118.82675170898438,
          32.067155999071446
        ],
        [
          118.82675170898438,
          32.05202582803068
        ]
      ],
      [
        [
          118.83550643920898,
          32.06904709449127
        ],
        [
          118.84666442871094,
          32.06904709449127
        ],
        [
          118.84666442871094,
          32.0766110850936
        ],
        [
          118.83550643920898,
          32.0766110850936
        ],
        [
          118.83550643920898,
          32.06904709449127
        ]
      ]
    ]

    // *************************创建点线面，添加到地图上面***************************

    //添加单个点
    const pointGraphic = addPoint(point[0], point[1], createPointSimpleMarkerSymbol())
    // 添加点的TEXT
    const pointTextGraphic = addPoint(point[0], point[1], createTextSymbol())
    // 添加多个点
    const multiPointGraphics = addMultipoint(multipoint, createPointPictureMarker('../../../../assets/imgs/pointImgs/pointImage.jpg', 20, 20, 0, 0))
    // 添加单个线图层
    const lineGraphic = addPolyline(line, createSimpleLineSymbol())
    // 添加多线数据
    const multiLineGraphics = addPolyline(multiLine, createSimpleLineSymbol())
    // 添加面数据Graphics
    const multiPolygonGraphics = addPolygon(multiPolygon, createPictureFillSymbol())


    view.graphics.addMany([pointGraphic, pointTextGraphic, multiPointGraphics, lineGraphic, multiLineGraphics, multiPolygonGraphics])


    // *************************创建点线面，添加到地图上面 END***************************

    // 点的样式
    // 创建点的图片标记
    function createPointPictureMarker(url, width, height, xoffset, yoffset) {
      var symbol = {
        type: 'picture-marker', // autocasts as new PictureMarkerSymbol()
        url,
        width,
        height,
        xoffset,
        yoffset,
      }
      return symbol
    } // end createPointMarker

    // 创建简单的点标记
    function createPointSimpleMarkerSymbol() {
      return {
        type: 'simple-marker',
        style: 'square',
        color: 'red',
        size: '8px',
        // xoffset,
        // yoffset,
        outline: {
          color: [255, 255, 0],
          width: 2, // points
        },
      }
    } // end createPointSimpleMarkerSymbol

    // 创建简单线的样式
    function createSimpleLineSymbol() {
      return {
        type: 'simple-line',
        cap: 'butt',
        color: [233, 123, 210],
        join: 'round',
        miterLimit: 2,
        style: 'solid',
        width: 3
      }
    }

    // 创建注记样式
    function createTextSymbol() {
      return {
        type: "text",
        color: "white",
        haloColor: "black",
        haloSize: "1px",
        text: "You are here",
        xoffset: 3,
        yoffset: 3,
        font: {
          size: 12,
          family: "Josefin Slab",
          weight: "bold"
        }
      };
    }
    // 创建面的填充样式「颜色填充」
    function createSimpleFillSymbol() {
      return {
        type: "simple-fill",
        color: [51, 51, 204, 0.9],
        style: "solid",
        outline: {  
          color: "white",
          width: 1
        }
      }
    }
    // 创建面的填充样式「图片填充」
    function createPictureFillSymbol() {
      return {
        type: "picture-fill",
        url: "https://static.arcgis.com/images/Symbols/Shapes/BlackStarLargeB.png",
        width: "24px",
        height: "24px",
        outline: {
          style: "solid"
        },
      }
    }

    changeSym = function() {
      multiPolygonGraphics.symbol = createSimpleFillSymbol()
    }
    /**
     * 添加点数据Graphic
     * lng经度 lat纬度
     */
    function addPoint(lng, lat, symbol) {
      const point = {
        type: 'point',
        hasM: true,
        longitude: lng,
        latitude: lat,
      }
      const pointGraphic = new Graphic({
        geometry: point,
        symbol,
      })
      return pointGraphic
    } // end addPoint

    /**
      * 添加点数据Graphic
      * lnglat:Number[][]
      */
    function addMultipoint(lnglatArray, symbol) {
      const point = {
        type: "multipoint",
        hasM: true,
        points: lnglatArray
      }
      const multipointGraphic = new Graphic({
        geometry: point,
        symbol,
      })
      return multipointGraphic
    } // end addPoint

    /**
     * 添加点文本数据Graphic
     * lng经度 lat纬度
     */
    function addPointText(lng, lat, textName) {
      const textSymbol = {
        type: 'text', // autocasts as new TextSymbol()
        color: 'white',
        haloColor: 'black',
        haloSize: '1px',
        text: textName || '',
        xoffset: 3,
        yoffset: 3,
        font: {
          size: 12,
          family: 'Josefin Slab',
          weight: 'bold',
        },
      }
      const point = {
        type: 'point',
        hasM: true,
        longitude: lng,
        latitude: lat,
      }
      const pointGraphic = new Graphic({
        geometry: point,
        symbol: textSymbol,
      })
      return pointGraphic
    } // end addPoint

    /**
     * 添加线数据Graphic
     *paths：二维数组，经纬度[[2,2],[3,3]]
     */
    function addPolyline(linePaths, symbol) {
      const polyline = {
        type: 'polyline',
        paths: linePaths,
      }
      const polylineGraphic = new Graphic({
        geometry: polyline,
        symbol,
        // attributes: lineAtt,
      })
      return polylineGraphic
    } // end addPolyline

    /**
     * 添加面数据Graphic
     *rings：二维数组，经纬度[[2,2],[3,3],[2,2]]，首尾数据一致
     */
    function addPolygon(polygonRings, symbol) {
      const polygon = {
        type: 'polygon',
        rings: polygonRings,
      }
      var lineAtt = {
        Name: 'Keystone Pipeline',
        Owner: 'TransCanada',
        Length: '3,456 km',
      }

      const polygonGraphic = new Graphic({
        geometry: polygon,
        symbol: symbol,
        attributes: lineAtt,
      })
      return polygonGraphic
    } // end addPolygon

  });// end load
</script>
</html>